<template>
  <div class="login-container">
    <!-- 头像及标题区域 -->
    <div class="avatar-area">
      <!-- 可替换成实际头像图片，这里用简单样式模拟 -->
      <div class="avatar">
        <img
          src="http://60.205.245.165:8081/static/img/avatar_default.89845f4e.png"
          alt=""
        />
      </div>
      <p class="title">litemall-vue</p>
    </div>
    <!-- 账号输入框 -->
    <div class="input-wrap">
      <span>账号:</span>
      <input
        type="text"
        v-model="account"
        placeholder="请输入测试账号 user123"
        class="login-input"
      />
    </div>
    <!-- 密码输入框 -->
    <div class="input-wrap">
      <span>密码:</span>
      <input
        type="password"
        v-model="password"
        placeholder="请输入测试密码 user123"
        class="login-input"
      />
    </div>
    <!-- 注册、忘记密码链接 -->
    <div class="link-group">
      <span class="link">免费注册</span>
      <span class="link">忘记密码</span>
    </div>
    <!-- 登录按钮 -->
    <button class="login-btn" @click="handleLogin">登录</button>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { login } from "@/server/api";
import { useRouter } from "vue-router";

const router = useRouter();

const account = ref("");
const password = ref("");

const handleLogin = async () => {
  console.log("account:", account.value);
  console.log("password:", password.value);
  try {
    const res = await login({
      username: account.value,
      password: password.value,
    });
    console.log(res);
    showToast(res.errmsg);
    //本地存储token
    localStorage.setItem("token", res.data.token);
    //跳转到来时的页面
    const from = localStorage.getItem("from");
    if (from) {
      router.replace(from);
      localStorage.removeItem("from");
      setTimeout(() => {
        window.location.reload();
      }, 500);
    } else {
      // 跳转到首页
      window.location.href = "/";
    }
  } catch (error) {
    console.log(error);
  }
};
</script>

<style scoped lang="scss">
.login-container {
  width: 100vw;
  height: 100vh;
  margin: 60px auto;
  text-align: center;
  position: absolute;
  background-color: white;
  z-index: 100;
}
.avatar-area {
  margin-bottom: 40px;
}
.avatar {
  margin: 0 auto 10px;
  background-color: #ddd;
  border-radius: 50%;
  width: 180px;
  height: 180px;
  overflow: hidden;
  > img {
    width: 100%;
    height: 100%;
  }
}
.title {
  margin: 0;
  font-size: 42px;
  color: #333;
}
.input-wrap {
  width: 90%;
  margin: 0 auto 40px;
  padding: 15px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border: 1px solid #616161;
}
.login-input {
  width: 80%;
  padding: 10px;
  box-sizing: border-box;
  border: none;
  border-radius: 4px;
}
.link-group {
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto 40px;
}
.link {
  color: #007bff;
  cursor: pointer;
}
.login-btn {
  width: 90%;
  padding: 40px;
  background-color: #dc3545;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.login-btn:hover {
  background-color: #c82333;
}
</style>
